<template>
  <Drawer
    v-model:visible="visible"
    class="custom-class"
    title="应用详情"
    width="100%"
    :destroyOnClose="true"
    placement="right"
  >
    <Divider orientation="left"><span style="margin-right: 8px; font-weight: bolder">应用基本信息</span></Divider>
    <div class="md:flex mb-10">
      <BasicInfoCard class="!md:mx-7 w-1/4 h-30 enter-x" title="应用" :count="appBasicData.appName"></BasicInfoCard>
      <BasicInfoCard class="!md:mr-7 w-1/4 h-30 enter-x" title="架构" :count="appBasicData.architecture"></BasicInfoCard>
      <BasicInfoCard class="!md:mr-7 w-1/4 h-30 enter-x" title="region" :count="appBasicData.region"></BasicInfoCard>
      <BasicInfoCard class="!md:mr-7 w-1/4 h-30 enter-x" title="租户" :count="appBasicData.tenantName"></BasicInfoCard>
    </div>
    <div v-if="appBasicData.architecture === '单体'">
      <Divider orientation="left"><span style="margin-right: 8px; font-weight: bolder">单体架构</span></Divider>
      <div class="md:flex m-10">
        <SingeAppTable :appId="appId" :tenantCode="tenantCode"></SingeAppTable>
      </div>
    </div>
    <div v-else>
      <Divider orientation="left"><span style="margin-right: 8px; font-weight: bolder">微服务架构</span></Divider>
      <div class="md:flex mb-10">
        <BasicInfoCard class="!md:mx-7 w-1/2 h-30 enter-x !md:mr-5" title="集群" :count="microData.clusterName"></BasicInfoCard>
        <BasicInfoCard class="!md:mr-7 w-1/2 h-30 enter-x !md:ml-5" title="namespace" :count="microData.namespace"></BasicInfoCard>
      </div>
      <div class="md:flex m-10">
        <MicroServiceTable :appId="appId" :tenantCode="tenantCode"></MicroServiceTable>
      </div>
    </div>

    <div class="absolute bottom-10 right-8">
      <AButton style="margin-right: 8px; font-weight: bolder" @click="onClose">取消</AButton>
      <AButton type="primary" style="font-weight: bolder" @click="onClose">确定</AButton>
    </div>
  </Drawer>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Button, Divider, Drawer } from 'ant-design-vue';
import BasicInfoCard from '/@/views/maintenance-center/resource-monitor/for-tenant/components/basicInfoCard.vue';
import { getAppBasicInfo, getNamespaceAndCluster } from '/@/api/maintenance-center/resource-monitor/for-tenant/resourceMonitor';
import SingeAppTable from '/@/views/maintenance-center/resource-monitor/for-tenant/components/singeAppTable.vue';
import MicroServiceTable from '/@/views/maintenance-center/resource-monitor/for-tenant/components/microServiceTable.vue';

export default defineComponent({
  components: {
    MicroServiceTable,
    SingeAppTable,
    BasicInfoCard,
    Drawer,
    AButton: Button,
    Divider,
  },
  setup() {
    const visible = ref<boolean>(false);
    const appId = ref();
    const tenantCode = ref();
    const appBasicData = ref({});
    const microData = ref({});

    const showDrawer = async (app, tenant) => {
      appId.value = app;
      tenantCode.value = tenant;
      appBasicData.value = await getAppBasicInfo({ appId: appId.value, tenantCode: tenantCode.value });
      if (appBasicData.value.architecture !== '单体') {
        microData.value = await getNamespaceAndCluster({ appId: appId.value, tenantCode: tenantCode.value });
      }
      visible.value = true;
    };

    const onClose = () => {
      visible.value = false;
    };
    return {
      visible,
      appId,
      tenantCode,
      microData,
      appBasicData,
      showDrawer,
      onClose,
    };
  },
});
</script>
